<template>
    <div class="navBtn">
        <div class="control-btn control-btn-small" v-if="this.$store.state.Collapse.isCollapse">
            <i class="el-icon-d-arrow-left" @click="setIsCollapse"></i>
        </div>
        <div>
            <Tags></Tags>
        </div>
    </div>
</template>
<script>
import Tags from "@/components/Tags.vue";
export default {
    components: {
        Tags,
    },
    methods: {
        setIsCollapse() {
            this.$store.commit(
                "changeIsCollapse",
                !this.$store.state.Collapse.isCollapse
            );
        },
    }
}
</script>
<style lang="scss" scoped>
::v-deep .el-tag {
    border: none !important;
    background-color: #fafafa;
    height: 32px;
    line-height: 32px;
}

.navBtn {
    display: flex;
}

.control-btn-small {
    width: 50px !important;
}

.control-btn {
    display: inline-block;
    text-align: center;
    color: #fff;
    background-color: #233040;
    width: 200px;
    height: 32px
}
.el-icon-d-arrow-left{
    line-height: 2;
}
</style>